<!doctype html>
<html lang="en">
<head>
    <title>FormDecorator - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijlist.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijradio.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijlist.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijradio.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            $("#select1").wijdropdown();
            $(":input[type='radio']").wijradio();
            $(":input[type='checkbox']").wijcheckbox();
            $("#wijmo-button").button();
            $("#wijmo-button").click(function () { return false; });
        });
    </script>
    <style type="text/css">
        .formdecorator label
        {
            display: block;
        }
        
        .formdecorator
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .formdecorator li
        {
            clear: both;
            margin-bottom: 1em;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <form action="overview.html">
            <ul class="formdecorator">
                <li>
                    <h3>
                        Input
                    </h3>
                    <input id="textbox" type="text" />
                </li>
                <li>
                    <h3>
                        TextArea</h3>
                    <textarea id="area" rows="2" cols="50"></textarea>
                </li>
                <li>
                    <h3>
                        Dropdown with Optgroups</h3>
                    <select id="select1">
                        <optgroup label="A-G">
                            <option>A</option>
                            <option selected="selected">B</option>
                            <option>C</option>
                            <option>D</option>
                            <option>E</option>
                            <option>F</option>
                            <option>G</option>
                        </optgroup>
                        <optgroup label="H-M">
                            <option>H</option>
                            <option>I</option>
                            <option>J</option>
                            <option>K</option>
                            <option>L</option>
                            <option>M</option>
                        </optgroup>
                    </select>
                </li>
                <li>
                    <h3>
                        CheckBox</h3>
                    <input id="checkbox1" type="checkbox" /><label for="checkbox1">checkbox1</label>
                    <input id="checkbox2" type="checkbox" /><label for="checkbox2">checkbox2</label>
                    <input id="checkbox3" type="checkbox" /><label for="checkbox3">checkbox3</label>
                    <input id="checkbox4" type="checkbox" /><label for="checkbox4">checkbox4</label>
                </li>
                <li>
                    <h3 id="radiobutton">
                        Radio</h3>
                    <input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">radio1</label>
                    <input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">radio2</label>
                    <input type="radio" name="radiobutton1" id="radio3" /><label for="radio3">radio3</label>
                    <input type="radio" name="radiobutton1" id="radio4" /><label for="radio4">radio4</label>
                </li>
                <li>
                    <h3>
                        Button</h3>
                    <button id="wijmo-button">
                        Submit</button>
                </li>
            </ul>
            </form>
        </div>
        <!-- End demo markup -->
        <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
        </div>
    </div>
    <div class="footer demo-description">
        <p>
            The Wijmo Form Decorator widgets (wijradio, wijcheckbox, wijdropdown, wijtextbox)
            are used to decorate a standard HTML form elements. The Form Decorator widgets allow
            any form element to be styled uniformly in any browser.
        </p>
    </div>
</body>
</html>
